<template>
  <div class="app-container">
    <div class="container">
      <div class="main page page-list">
       <!-- 头部 -->
    <div class="inDetails-head">
      <div class="inDetails-head-icon">
        <i
          class="iconfont icon-fapiaoyoujidizhi"
          style="font-size: 40px; color: #409eff"
        ></i>
        <span v-if="invoiceDetails.invoiceStatus === 'wait'" class="inDetails-head-icon-t">待开票</span>
        <span v-if="invoiceDetails.invoiceStatus === 'dealing'" class="inDetails-head-icon-t">开票中</span>
        <span v-if="invoiceDetails.invoiceStatus === 'success'" class="inDetails-head-icon-t"
          >开票成功</span
        >
        <span v-if="invoiceDetails.invoiceStatus === 'mailed'" class="inDetails-head-icon-t"
          >已邮寄</span
        >
        <span v-if="invoiceDetails.invoiceStatus === 'fail'" class="inDetails-head-icon-t"
          >开票失败</span
        >
      </div>

      <div>
        <div class="inDetails-head-step">
          <el-steps finish-status="process" :active="active">
            <el-step title="申请开票"></el-step>
            <el-step title="开票中"></el-step>
            <el-step title="已开票"></el-step>
            <el-step
              v-if="invoiceDetails.invoiceMaterial === 1"
              title="已邮寄"
            ></el-step>
          </el-steps>
        </div>
      </div>
    </div>
       <!-- 抬头信息 -->
    <div class="invoice-info">
      <div class="invoice-info-head">
        <span>抬头信息</span>
      </div>

      <div class="invoice-info-head1">
        <div class="invoice-info-content">
          <div class="invoice-info-content-t1">
            <span>发票抬头</span>
            <span class="invoice-info-content-t2">{{
              invoiceDetails.invoiceTitle
            }}</span>
          </div>

           <div class="invoice-info-content-t1">
            <span>发票类型</span>
            <span
              class="invoice-info-content-t2"
              v-if="invoiceDetails.invoiceType === 0"
              >增值税专用发票</span
            >
            <span
              class="invoice-info-content-t2"
              v-if="invoiceDetails.invoiceType === 1"
              >增值税普通发票</span
            >
          </div>

          <div class="invoice-info-content-t1">
            <span>纳税人识别号</span>
            <span class="invoice-info-content-t2">{{
              invoiceDetails.taxIdNumber ? invoiceDetails.taxIdNumber : "-"
            }}</span>
          </div>

       <div class="invoice-info-content-t1">
            <span>基本开户银行</span>
            <span class="invoice-info-content-t2">{{
              invoiceDetails.accountsBank ? invoiceDetails.accountsBank : "-"
            }}</span>
          </div>

          <div class="invoice-info-content-t1">
            <span>基本开户账号</span>
            <span class="invoice-info-content-t2">{{
              invoiceDetails.accountNo ? invoiceDetails.accountNo : "-"
            }}</span>
          </div>

        <div class="invoice-info-content-t1">
            <span>企业注册地址</span>
            <span class="invoice-info-content-t2">{{
              invoiceDetails.registeredAddress ? invoiceDetails.registeredAddress : "-"
            }}</span>
          </div>


        <div class="invoice-info-content-t1">
            <span>企业注册电话</span>
            <span class="invoice-info-content-t2">{{
              invoiceDetails.registeredPhone ? invoiceDetails.registeredPhone : "-"
            }}</span>
          </div>
          
        </div>
      </div>
    </div>
    <!-- 发票信息 -->
    <div class="invoice-info">
      <div class="invoice-info-head">
        <span>发票信息</span>
      </div>

      <div class="invoice-info-head1">
        <div class="invoice-info-content">
          <div class="invoice-info-content-t1">
            <span>发票编号</span>
            <span class="invoice-info-content-t2" 
              >{{ invoiceDetails.id }}</span
            >
          </div>
          <div class="invoice-info-content-t1">
            <span>发票抬头</span>
            <span class="invoice-info-content-t2">{{
              invoiceDetails.invoiceTitle
            }}</span>
          </div>
          <div class="invoice-info-content-t1">
            <span>发票金额</span>
            <span class="invoice-info-content-t2" style="color: #ff770d"
              >{{ invoiceDetails.invoiceAmount }}元</span
            >
          </div>

          <div class="invoice-info-content-t1">
            <span>发票类型</span>
            <span
              v-if="invoiceDetails.invoiceType === 0"
              class="invoice-info-content-t2"
              >增值税专用发票</span
            >
            <span
              v-if="invoiceDetails.invoiceType === 1"
              class="invoice-info-content-t2"
              >增值税普通发票</span
            >
          </div>
          <div class="invoice-info-content-t1">
            <span>发票介质</span>
            <span
              class="invoice-info-content-t2"
              v-if="invoiceDetails.invoiceMaterial === 0"
              >电子发票</span
            >
            <span
              class="invoice-info-content-t2"
              v-if="invoiceDetails.invoiceMaterial === 1"
              >纸质发票</span
            >
          </div>

          <div class="invoice-info-content-t1">
            <span>发票号码</span>
            <span class="invoice-info-content-t2">{{
              invoiceDetails.invoiceNumber ? invoiceDetails.invoiceNumber : "-"
            }}</span>
          </div>

          <div
            class="invoice-info-content-t1"
            v-if="invoiceDetails.invoiceMaterial === 1"
          >
            <span>邮寄地址</span>
            <span class="invoice-info-content-t2"
              >{{ invoiceDetails.province }}
              {{ invoiceDetails.city }}
              {{ invoiceDetails.district
              }}{{ invoiceDetails.detailedAddress }}，{{
                invoiceDetails.recipientName
              }}，{{ invoiceDetails.contactsPhone }}
            </span>
          </div>

          <div class="invoice-info-content-t1" v-if="invoiceDetails.invoiceMaterial === 1">
            <span>快递单号</span>
            <span class="invoice-info-content-t2">{{
              invoiceDetails.expressNumber ? invoiceDetails.expressNumber : "-"
            }}</span>
          </div>

          <div class="invoice-info-content-t1" v-if="invoiceDetails.invoiceMaterial === 1">
            <span>邮寄时间</span>
            <span class="invoice-info-content-t2">{{
              invoiceDetails.mailedTime ? invoiceDetails.mailedTime : "-"
            }}</span>
          </div>

           <div class="invoice-info-content-t1" >
            <span>备注</span>
            <span class="invoice-info-content-t2">{{
              invoiceDetails.remark ? invoiceDetails.remark : "-"
            }}</span>
          </div>
        </div>
      </div>
    </div>
        
          <!-- 关联消费记录 -->
    <div class="relation-charge-record">
      <div class="relation-charge-record-head">
        <span>关联消费记录</span>
      </div>
      <div class="relation-charge-record-table">
 <el-table
        size="mini"
        ref="multipleTable"
        :data="chargeRecordData"
        tooltip-effect="light"
        border
        highlight-current-row
        style="width: 100%;"
        max-height="400"
      >
        <el-table-column label="充值编号">
          <template slot-scope="scope">{{ scope.row.id }}</template>
        </el-table-column>
        <el-table-column prop="amount" label="充值金额"> </el-table-column>
        <el-table-column prop="endTime" label="充值时间" >
        </el-table-column>
      </el-table>
      </div>

    </div>

        
      </div>
    </div>
  </div>
</template>


<script>
import { listRelatedChargeRecord } from "@/api/business";
export default {
  data() {
    return {
       active: 0,
      invoiceDetails: {
        id:null,
        invoiceStatus:""
      },
      chargeRecordData:[]
    };
  },
  components: {},
  methods: {
  //从内存中拿取数据
    getInvoice() {
      this.invoiceDetails = JSON.parse(localStorage.getItem("INVOICE_DETAILS"));
      if (this.invoiceDetails.invoiceStatus === "dealing") {
        this.active = 1;
      }
      if (this.invoiceDetails.invoiceStatus === "success") {
        this.active = 2;
      }
      if (this.invoiceDetails.invoiceStatus === "mailed") {
        this.active = 3;
      }
    },
   
    init(){
      let id = this.invoiceDetails.id
      listRelatedChargeRecord(id).then(resp=>{
        if(resp.success){
          this.chargeRecordData = resp.data
        }else{
          this.$message.error(resp.resultMessage);
        }
      }).catch(err=>{

      })
    },
  },
  mounted() {
    this.getInvoice()
    this.init()
  },
};
</script>

<style lang="scss" scoped>
.inDetails-head {
  height: 150px;
  background: #fff;
  padding: 24px 24px 16px 24px;
  .inDetails-head-icon {
    display: flex;
    align-items: center;
    .inDetails-head-icon-t {
      font-weight: 600;
      font-size: 16px;
      margin-left: 8px;
    }
  }
  .inDetails-head-step {
    margin-top: 24px;
  }
}

// 抬头信息
.invoice-info {
  margin-top: 24px;
  background: #fff;
  .invoice-info-head {
    padding: 24px;
    font-weight: 600;
    font-size: 16px;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .invoice-info-head1 {
    padding: 24px;
    font-weight: 600;
    font-size: 16px;
    .invoice-info-content {
      display: grid;
      grid-template-rows: repeat(2, 1fr);
      grid-template-columns: repeat(2, 1fr);
      justify-items: start;
      align-items: start;
      .invoice-info-content-t1 {
        color: #999;
        font-weight: 500;
        font-size: 14px;
        margin-bottom: 24px;
        .invoice-info-content-t2 {
          margin-left: 16px;
          font-size: 15px;
          font-weight: 500;
          color: #000;
        }
      }
    }
  }
}
.relation-charge-record{
   background: #fff;
  border-bottom: 1px solid #eee;
    .relation-charge-record-head {
    padding: 24px;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .relation-charge-record-table{
    margin: 0px 24px 24px 24px;
  }
}
</style>
